<template>
	<div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn" @click="retreat">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">京选友惠</div>
		</header>
		<div class="grabmain">
			<div class="snatchback"><img src="../assets/graback.png"></div>
			<div class="snatchware">
				<div class="snatmodule">
					<div class="snatimg"><img :src="spuJson.mainImageUrl"></div>
					<div class="snakdetail">
						<div class="snakname">{{spuJson.goodsName}}</div>
						<div class="snakOrginprice">京东价:<span>￥{{spuJson.price}}</span></div>
						<div class="snakPrice">用券后：￥{{spuJson.conPrice}}</div>
					</div>
					
				</div>
				<div class="detailbut" @click="checkDetail">查看商品详情</div>
			</div>
			<div class="filterbanner"><img src="../assets/choiceback.png"></div>
			<div class="singproduCon">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">

				<li class="sameproli" v-for="item in singlist">
					<div v-if="item.spuPlatform == 'yh'" @click="allDetailyh(item.id)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice">到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
					<div v-else-if="item.spuPlatform == 'jd'" @click="allDetailjd(item.id,item.couponMoney)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice">到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
					<div v-else-if="item.spuPlatform == 'pdd'" @click="allDetailpdd(item.id)">
						<div class="singproimg">
							<img :src="item.mainImageUrl">
							<i class="yhSymbol" v-if="item.spuPlatform == 'yh'"></i>
							<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
							<i class="pddSymbol" v-if="item.spuPlatform == 'pdd'"></i>
						</div>
						<div class="singproname">{{item.goodsName}}</div>
						<div class="singprice">
							<span class="singOrginprice">￥{{item.price}}</span>
							<span class="signActiveprice">到手价:￥<font style="font-size: 0.32rem;">{{item.conPrice}}</font></span>
						</div>
						<div class="singcoup">
							<div class="redpacketsing">{{item.couponMoney}}元券</div>
							<span class="singtotalsum">已抢{{item.totalSales}}件/评价</span>
						</div>
					</div>
				</li>

			</ul>
		</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { gzhUrl } from '../Baseurl/common.js';
	import { InfiniteScroll } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				id: '',
				loading: '',
				backImg:'',
				singlist: [],
				singjson: [],
				index: 0,
				spuJson:[],
				token:'',
				loadId:'',
				spuId:''
			}
		},
		created() {
			this.singInfo(this.index);
			var href = window.location.href;
//			console.log(href.split('?')[1])
//			this.id = href.split('?')[1];
			this.id = this.$route.query.id;
			this.loadId = href.split('&')[1]
			/*var url = BaseUrl +'goods/getSpuEmptyMsg?'+href.split('?')[1];
			this.$http.get(url).then(res => {
				console.log(res.data);
			})*/
			
			/*var linkUrl = BaseUrl +'share/getConLink?'+this.id;
			this.$http.get(linkUrl).then(res => {
				//console.log(res.data);
				   
					if(res.data.code == "10000"){
						window.location.href = res.data.data;
					}else{
						var url = BaseUrl +'goods/getSpuEmptyMsg?id='+res.data.spuId;
						this.$http.get(url).then(res => {
							console.log(res.data);
							if(res.data.code == "10000"){
								this.spuJson = res.data.data
							}
							
						})
						
						
					}
			})*/
			var url = BaseUrl + 'goods/getSpuEmptyMsg?' + href.split('?')[1];
				this.$http.get(url).then(res => {
					if(res.data.code == "10000") {
						this.spuJson = res.data.data
					} else {
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
			}).catch(error=>{
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
		},
		methods: {//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			/*detailbut:function(){
				var url = BaseUrl +'share/getCommonLink?'+this.id;
				this.$http.get(url).then(res => {
				console.log(res.data);
					if(res.data.code == "10000"){
						window.location.href = res.data.data;
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						});
					}
				})
				
			}*/
			singInfo(index) {

				//单品
				var singurl = BaseUrl + 'goods/advice';
				this.$http.get(singurl + "?length=10&start=" + this.index).then(res => {
					if(res.data.code == "10000") {
						this.singjson = res.data.data;
						this.singlist = this.singlist.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore() {

				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 1000);
				}
			},
//			allDetail:function(obj,id){
//				var href = window.location.href;
////				window.location.href = gzhUrl+'?backUrl='+escape(href);
//				
//				//var jdUrl;
//				/*if(id == 0){
//					jdUrl = BaseUrl+'share/getOtherLink'+this.loadId+"&spuId="+obj;
//				}else{
//					jdUrl = BaseUrl+'share/getOtherLink'+this.loadId+"&spuId="+obj;
//				}*/
//				var jdUrl = BaseUrl+'share/getOtherLink?'+this.loadId+"&spuId="+obj;
////				console.log(this.loadId)
////				console.log(obj)
//				this.$http.get(jdUrl).then(res => {
//
//					if(res.data.code == "10000"){
////						console.log(res.data.data)
//						window.location.href = res.data.data
//					}else{
//						Toast({
//							message: res.data.msg,
//							position: 'middle',
//							duration: 3000
//						});
//					}
//					
//				})
//			},
			allDetailjd:function(id,couponMoney){
				this.commodity(id, couponMoney); //全局事件
			},
			allDetailyh:function(id) {
				this.yhcommodity(id);//全局事件
			},
			allDetailpdd:function(id) {
				this.pddcommodity(id);//全局事件
			},
			checkDetail:function(){
				var url = BaseUrl+'jd/getUrl?'+ "&spuId=" + this.id;
//				console.log(url)
				this.$http.get(url).then(res => {
					if(res.data.code == "10000"){
//						console.log(res.data.data)
						window.location.href = res.data.data
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						});
					}		
				}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.grabmain {
		width: 100%;
		margin-top: 1rem;
	}
	
	.snatchback {
		width: 100%;
		height: 4.49rem;
	}
	
	.snatchback>img {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.snatchware {
		padding: 0.25rem 0.14rem;
		background-color: #241B67;
	}
	
	.snatmodule {
		padding: 0.1rem;
		background-color: #FFFFFF;
		display: inline-flex;
		width: 100%;
	}
	
	.snatimg {
		width: 2.5rem;
		height: 2.5rem;
		background-color: red;
	}
	.snatimg>img{
		width: 100%;
		height: 100%;
	}
	.snakdetail {
		margin-left: 0.2rem;
		width: 60%;
	}
	
	.snakname {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: #323232;
		font-size: 0.28rem;
	}
	
	.snakOrginprice {
		margin-top: 0.6rem;
		color: #989898;
		font-size: 0.28rem;
	}
	
	.snakOrginprice>span {
		text-decoration: line-through;
		margin-left: 0.1rem;
	}
	
	.snakPrice {
		font-size: 0.32rem;
		color: #ff2040;
		font-weight: bold;
		margin-top: 0.05rem;
	}
	.detailbut{
		width: 100%;
		height: 0.64rem;
		background-color: #FF2040;
		color: #FFFFFF;
		line-height: 0.64rem;
		font-size: 0.28rem;
		text-align: center;
		margin-top: -0.02rem;
		border-bottom-left-radius: 0.15rem;
   		border-bottom-right-radius: 0.15rem;
	}
	/******为你精选*******/
	.filterbanner{
		width: 100%;
		height: 0.8rem;
	}
	.filterbanner>img{
		width: 100%;
		height: 100%;
	}
	/****单品****/
	
	.singproduCon {
		width: 100%;
	}
	
	.singproduCon>ul {
		font-size: 0;
	}
	
	.sameproli {
		width: 49.3%;
		background: #FFFFFF;
		margin-top: 0.2rem;
		display: inline-block;
		padding: 0.10rem;
	}
	
	.sameproli:nth-child(1) {
		margin-top: 0rem;
	}
	
	.sameproli:nth-child(2) {
		margin-top: 0rem;
	}
	
	.sameproli:nth-child(even) {
		margin-left: 0.1rem;
	}
	
	.singproimg {
		width: 3.51rem;
		height: 3.51rem;
		/*background-color: red;*/
	}
	
	.singproimg>img {
		width: 100%;
		height: 100%;
	}
	
	.singproname {
		width: 100%;
		color: #323232;
		height: 0.65rem;
		line-height: 0.35rem;
		font-size: 0.28rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: 0.15rem;
	}
	
	.singprice {
		font-size: 0;
	}
	
	.singOrginprice {
		display: inline-block;
		font-size: 0.28rem;
		color: #989898;
		line-height: 0.55rem;
		
	}
	
	.signActiveprice {
		display: inline-block;
		float: right;
		font-size: 0.22rem;
		color: #FF2040;
		
	}
	
	.singcoup {
		width: 100%;
		font-size: 0;
	}
	
	.redpacketsing {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100% 100%;
		color: #FFFFFF;
		text-align: center;
		line-height: 0.28rem;
		font-size: 0.23rem;
		display: inline-block;
		margin-top: 0.05rem;
	}
	
	.singtotalsum {
		float: right;
		font-size: 0.28rem;
		color: #989898;
	}
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}
	
	.yhSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/yh.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}
	.pddSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/pdd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		margin-top: -0.65rem;
		float: right;
	}
</style>